<template>
  <div class="day2">
    <h2>案例</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- v-for="每个选项变量名称 in  data数据中的数组" -->
        <tr v-for="brand in brandList" :key="brand.id">
          <td>{{ brand.id }}</td>
          <td>{{ brand.brandName }}</td>
          <td>{{ brand.createTime }}</td>
          <td>
            <a href="#" @click.prevent="delBrand(brand.id)">删除</a>
          </td>
        </tr>
        <!-- 条件渲染使用v-if  显示的条件：数组没有长度 -->
        <tr v-if="brandList.length === 0">
          <td colspan="4" style="text-align: center">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <el-divider></el-divider>
    <h2>class-style语法</h2>
    <!-- active是个类css要声明 isActive变量-->
    <p>class第一种写法：</p>
    <div :class="{ active: isActive, font30: isBig }">class第一种写法</div>
    <p>class第二种对象写法：</p>
    <div :class="classObject">class第二种对象写法</div>
    <p>class第三种数组写法：</p>
    <div :class="[active, font30]">class第三种数组写法1</div>
    <div :class="[isActive2 ? active : '', font30]">class第三种数组写法2</div>
    <p>class第四种数组对象混合写法：</p>
    <div :class="[{ active: isActive2 }, font30]">
      class第四种数组对象混合写法
    </div>
    <p>
      style第一种写法：font-Size要写成fontSize,不是连写的都改成驼峰模式或者加引号
    </p>
    <!--  <div :style="{ color: activeColor, 'font-size': fontSize }">
      style第一种写法
    </div> -->
    <div :style="{ color: activeColor, fontSize: fontSize }">
      style第一种写法
    </div>
    <p>style第二种对象写法，定义在data</p>
    <div :style="styleObj">style第二种对象写法</div>
    <p>style第三种数组写法，定义在data</p>
    <div :style="[style1, style2]">style第三种数组写法</div>
    <p>style第四种数组对象混合写法：</p>
    <div :style="[isActive3 ? style1 : '', style2]">
      style第四种数组对象混合写法
    </div>
    <el-divider></el-divider>
    <h2>v-model语法糖</h2>
    <p>文章地址：https://www.jianshu.com/p/f8b7bf92d3dd</p>
    <!-- <input type="text" :value="num" @input="num = $event.target.value * 1" /> -->
    <!-- 默认绑定值会变成字符串，如果要变成数字用v-model.number -->
    <input type="text" v-model="num" />
    <el-divider></el-divider>
    <h2>表单绑定</h2>
    <!-- 输入框 -->
    <input type="text" v-model="str" />
    <hr />
    <!-- 下拉框 -->
    <select v-model="subject">
      <!-- :value和value -->
      <!-- 第一种 -->
      <!--       <option :value="1">前端</option>
      <option :value="2">java</option>
      <option :value="3">UI</option> -->
      <!-- 第二种和第一种区别value是绑定的字符串，第一种是数字 -->
      <!--    <option value="1">前端</option>
      <option value="2">java</option>
      <option value="3">UI</option> -->
      <!-- 第三种绑定变量 -->
      <option :value="selectOptions.one">前端</option>
      <option :value="selectOptions.two">java</option>
      <option :value="selectOptions.three">UI</option>
    </select>
    <hr />
    <!-- 复选框 -->
    <!-- 1. 单个复选框  表示布尔类型的值  true 选中 false 不选中 -->
    <input type="checkbox" v-model="isChecked" />
    <hr />
    <!-- 2. 多个复选框跟下拉框绑定值类似也可以绑定变量，自行尝试 -->
    <input type="checkbox" value="book" v-model="hobby" /> 书籍
    <input type="checkbox" value="ball" v-model="hobby" /> 球类
    <input type="checkbox" value="game" v-model="hobby" /> 游戏
    <hr />
    <!-- 单选框 -->
    <input type="radio" value="男" v-model="gender" /> 男
    <input type="radio" value="女" v-model="gender" /> 女
    <!-- 文本域 -->
    <hr />
    <textarea v-model="text"></textarea>
    <el-divider></el-divider>
    <h2>
      v-cloak,了解用的不多https://blog.csdn.net/m0_37865510/article/details/108060552
    </h2>
    <p>
      在使用{{}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过度现象
    </p>
    <h1 v-cloak>v-cloak:{{ msg }}</h1>
    <p>或者用v-text</p>
    <h1>
      v-text:
      <span v-text="msg"></span>
    </h1>
    <el-divider></el-divider>
    <h2>v-once,只渲染一次，通常展示初始值</h2>
    <div v-once>初始值：{{ count }}</div>
    <div>累加值：{{ count }}</div>
    <button @click="count++">加一</button>
    <el-divider></el-divider>
    <h2>
      过滤器--跟方法类似，方便在模板里面处理变量，比如变量是时间戳，变成日期展示
    </h2>
    <p>过滤器1：{{ message | capitalize }}</p>
    <p>过滤器2：{{ message | capitalize("!") }}</p>
    <el-divider></el-divider>
    <h2>vue获取原生dom</h2>
    <div ref="container">我是一个容器</div>
    <button @click="getText">获取container的html</button>
  </div>
</template>

<script>
export default {
  name: 'day-2',
  data() {
    return {
      brandList: [
        { id: 1, brandName: '宝马', createTime: '2020-06-01 12:12:12' },
        { id: 2, brandName: '宝骏', createTime: '2021-06-01 12:12:12' },
        { id: 3, brandName: '保时捷', createTime: '2020-06-01 12:12:12' },
        { id: 4, brandName: '奥迪', createTime: '2025-06-01 12:12:12' }
      ],
      isActive: true,
      isBig: true,
      classObject: {
        active: true,
        font30: true
      },
      active: 'active',
      font30: 'font30',
      isActive2: false,
      activeColor: 'green',
      fontSize: '20px',
      styleObj: { color: 'orange', fontSize: '50px' }, // 或者{ color: 'orange', 'font-size': '50px' }
      style1: { color: 'blue' },
      style2: {
        fontSize: '60px'
      },
      isActive3: false,
      num: 1111,
      str: '输入框',
      subject: '',
      isChecked: false,
      hobby: [],
      gender: '男',
      text: '文本域',
      selectOptions: {
        one: 'one',
        two: 'two',
        three: 'three'
      },
      msg: '你好',
      count: 100,
      message: 'abDS'
    }
  },
  // 过滤器
  filters: {
    capitalize(value, txt = '') {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1) + txt
    }
  },
  methods: {
    // 删除品牌
    delBrand(id) {
      // 1. 根据ID找到索引
      const index = this.brandList.findIndex((item) => item.id === id)
      // 2. 根据索引删除数据
      this.brandList.splice(index, 1)
    },
    getText() {
      console.log(this.$refs.container.innerText)
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: red;
}
.font30 {
  font-size: 30px;
}
[v-cloak] {
  display: none;
}
</style>
